<template>
  <div>
    <el-main>
      <el-row>
        <el-col :span="3">
          <el-input placeholder="关键词搜索" v-model="keyword" @change="getSearch">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-col>
        <el-col class="b_table">
          <el-table
            height="800"
            :header-cell-style="{ backgroundColor: '#f5f6f9' }"
            :data="tableData"
            style="width: 100%"
            stripe
            @row-click="rowClick"
          >
            <el-table-column
              class-name="tableColumn"
              prop="company"
              label="企业名称"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="num" label="总量" align="center"> </el-table-column>

            <el-table-column :label="year[0] + ''" align="center" class-name="tableColumn">
              <el-table-column align="center" prop="two_patent" label="发明授权" class-name="tableColumnItem_l">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.two_patent_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.two_patent }}
                    </span>
                    <i
                      v-if="scope.row.two_patent_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="two_news" label="实新" >
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.two_news_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.two_news }}
                    </span>
                    <i
                      v-if="scope.row.two_news_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="two_apper" label="外观" >
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.two_apper_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.two_apper }}
                    </span>
                    <i
                      v-if="scope.row.two_apper_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="two_pct" label="PCT" >
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.two_pct_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.two_pct }}
                    </span>

                    <i
                      v-if="scope.row.two_pct_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="two_rate" label="发明授权率" class-name="tableColumnItem_r">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.two_rate_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.two_rate }}
                    </span>
                    <i
                      v-if="scope.row.two_rate_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column :label="year[1] + ''" align="center">
              <el-table-column align="center" prop="one_patent" label="发明授权">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.one_patent_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.one_patent }}
                    </span>
                    <i
                      v-if="scope.row.one_patent_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="one_news" label="实新">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.one_news_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.one_news }}
                    </span>
                    <i
                      v-if="scope.row.one_news_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="one_apper" label="外观">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.one_apper_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.one_apper }}
                    </span>
                    <i
                      v-if="scope.row.one_apper_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="one_pct" label="PCT">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.one_pct_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.one_pct }}
                    </span>
                    <i
                      v-if="scope.row.one_pct_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="one_rate" label="发明授权率">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.one_rate_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.one_rate }}
                    </span>
                    <i
                      v-if="scope.row.one_rate_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column :label="year[2] + ''" align="center" class-name="tableColumn">
              <el-table-column align="center" prop="patent" label="发明授权" class-name="tableColumnItem_l">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.patent_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.patent }}
                    </span>
                    <i
                      v-if="scope.row.patent_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="news" label="实新">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.news_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.news }}
                    </span>
                    <i
                      v-if="scope.row.news_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="apper" label="外观">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.apper_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.apper }}
                    </span>
                    <i
                      v-if="scope.row.apper_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="pct" label="PCT">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.pct_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.pct }}
                    </span>
                    <i
                      v-if="scope.row.pct_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="rate" label="发明授权率" class-name="tableColumnItem_r">
                <template slot-scope="scope">
                  <div>
                    <span
                      :style="{
                        color: scope.row.rate_status == 2 ? '#fe4e46' : 'initial',
                      }"
                    >
                      {{ scope.row.rate }}
                    </span>
                    <i
                      v-if="scope.row.rate_status == 2"
                      class="el-icon-bottom"
                      style="color: #fe4e46"
                    ></i>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="rate"
              label="代理机构"
              width="180"
            >
              <template slot-scope="scope">
                <div v-for="item in scope.row.cro">{{ item }}</div>
              </template>
            </el-table-column>
            <el-table-column
              class-name="tableColumn"
              align="center"
              prop="rate"
              label="荣誉"
              width="240"
            >
              <template slot-scope="scope">
                <div style="display: flex;flex-wrap: wrap;">
                  <span class="b_bule" v-for="item in scope.row.honor.one"> 
                    {{ item.name }}
                  </span>
                  <span class="b_bule" v-for="item in scope.row.honor.three"> 
                    {{ item.name }}
                  </span>
                  <span class="b_bule" v-for="item in scope.row.honor.two"> 
                    {{ item.name }}
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col>
          <div style="margin-top: 20px">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="pageCount"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import { visitRank, getCompany } from "@/api/configApi";

export default {
  components: {},
  data() {
    return {
      keyword: "",
      tableData: [],
      year: [],
      pageCount: 0,
      region_id: this.$store.state.user.region_id,
      page: 1,
    };
  },
  mounted() {
    this.dataList();
  },
  methods: {
    rowClick(row) {
      console.log(row.company);
      getCompany({
        company: row.company,
      }).then((res) => {
        this.$router.push({
          path: "/workEnterprisevisit",
          query: {
            company_id: res.id,
          },
        });
      });
    },
    getSearch(val) {
      console.log(this.keyword, val);
      this.page = 1;
      this.dataList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataList();
    },
    dataList() {
      visitRank({
        region_id:  this.region_id,
        keyword: this.keyword,
        page: this.page,
        limit: 10,
      }).then((res) => {
        console.log(res);
        this.tableData = res.list;
        this.year = res.year;

        this.pageCount = res.count;
        if (res.count >= 10000) {
          this.pageCount = 10000;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-input__inner {
}
::v-deep .el-table tr {
  td:nth-child(3) {
    // border-left: 2px solid #c8cbd2 !important;
    // background-color: #f5f7fa;
  }
  td:nth-child(4),
  td:nth-child(5),
  td:nth-child(6) {
    // background-color: #f5f7fa;
  }
  td:nth-child(7) {
    // border-right: 2px solid #c8cbd2 !important;
    // background-color: #f5f7fa;
  }

  td:nth-child(13) {
    // border-left: 2px solid #c8cbd2 !important;
    // background-color: #f5f7fa;
  }
  td:nth-child(14),
  td:nth-child(15),
  td:nth-child(16) {
    // background-color: #f5f7fa;
  }
  td:nth-child(17) {
    // border-right: 2px solid #c8cbd2 !important;
    // background-color: #f5f7fa;
  }
}

::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;
}

.mr {
  margin-bottom: 20px;
}

.mr:hover {
  background: #f4f5f7;
  cursor: pointer;
}

.el-main {
  margin: 25px 30px 0 30px;
  border-radius: 5px;
}

::v-deep .el-tabs__item {
  padding: 0 52px;
  font-size: 16px;
}

::v-deep input {
  border-radius: 30px;
  height: 38px;
  font-size: 16px;
}

::v-deep .el-table_1_column_5 {
  text-align: center;
}

::v-deep .tableColumn {
  // border-right: 2px solid #c8cbd2 !important;
  // border-left: 2px solid #c8cbd2 !important;
  // background-color: #f5f7fa;
}

::v-deep .tableColumnItem_l {
  // border-left: 2px solid #c8cbd2 !important;
}
::v-deep .tableColumnItem_r {
  // border-right: 2px solid #c8cbd2 !important;
}
.b_table {
  margin-top: 15px;
}

.button_ys {
  background-color: #387dff;
  height: 30px;
  line-height: 5px;
  padding: 10px 40px;
}
.b_bule {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  line-height: 20px;
  border: 0;
  padding-left: 6px;
  padding-right: 6px;
}
@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}
</style>
